<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" >
            <image :src="item.image" mode="aspectFill" :draggable="false"/>
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <view v-if="workMenus">
      <block v-for="(section, index) in workMenus.children" :key="index">
        <uni-section :title="section.workMenu.menuName" type="line"></uni-section>
        <view class="grid-body">
          <uni-grid :column="4" :showBorder="false">
            <uni-grid-item v-for="item in section.children" :key="item.workMenu.menuId">
              <view class="grid-item-box" @click="changeGrid(item.workMenu.path)">
                <u-icon  :name="item.workMenu.icon" color="#2979ff" size="30" ></u-icon>
                <text class="text">{{ item.workMenu.menuName }}</text>
              </view>
            </uni-grid-item>
          </uni-grid>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
// interfaceCode
import UniSection from "../../components/uni-section/uni-section.vue";
import UniSwiperDot from "../../uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue";
import UniGrid from "../../uni_modules/uni-grid/components/uni-grid/uni-grid.vue";
import UniGridItem from "../../uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UIcon from "../../uview-ui/components/u-icon/u-icon.vue";
import {getWorkMenus} from "../../api/login";

export default {
  components: {
    UIcon,
    UniIcons,
    UniGridItem,
    UniGrid,
    UniSwiperDot,
    UniSection
  },
  data() {
    return {
      workMenus: {
        children: []
      },
      current: 0,
      swiperDotIndex: 0,
      data: [{
        image: '/static/images/banner/banner01.jpg'
      }, {
        image: '/static/images/banner/banner02.jpg'
      }, {
        image: '/static/images/banner/banner03.jpg'
      }]
    };
  },
  created() {
    getWorkMenus().then(res => {
      this.workMenus = res.data;
    });
  },
  methods: {
    changeSwiper(e) {
      this.current = e.detail.current;
    },
    changeGrid(page) {
      this.$tab.navigateTo(page);
    }
  },

};</script>

<style lang="scss">

view {
  font-size: 14px;
  line-height: inherit;
}


.text {
  text-align: center;
  font-size: 13px;
  margin-top: 5px;
}

.grid-item-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 100%;;
}

.swiper {
  height: 300px;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 150px;
  line-height: 150px;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    margin: 8px auto 0;
  }

  .image {
    width: 100%;
  }
}
</style>
